<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" media="screen" type="text/css" title="mainStyle" href="style/style.css" />

        <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>

        <script type="text/javascript">
            var nompage = "sindex.html";
            $(document).ready(function() {
                $("#main_article").load(nompage); //1er chargement
                $("nav").find("li").click(function() {

                    page = $(this).children("a").attr("id");
                    switch (page)
                    {
                        case "p1":
                            nompage = "sindex.html";
                            break;
                        case "p2":
                            nompage = "page1.html";
                            break;
                        case "p3":
                            nompage = "contact.html";
                            break;
                        default:
                            nompage = "sindex.html"
                            break;
                    }
                    $("#main_article").load(nompage);
                    nompage = "sindex.html";
                });
            });
        </script>

        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <title>Nuit de l'info</title>
    </head>

    <!--[if IE 6 ]><body class="ie6 old_ie"><![endif]-->
    <!--[if IE 7 ]><body class="ie7 old_ie"><![endif]-->
    <!--[if IE 8 ]><body class="ie8"><![endif]-->
    <!--[if IE 9 ]><body class="ie9"><![endif]-->
    <!--[if !IE]><!--><body><!--<![endif]-->
        <div id="bloc_page">
            <header>
                <div id="titre_principal">
                    <img src="images/logo_1.png" alt="Logo de Zozor" id="logo" />
                </div>

                <nav>
                    <ul>
                        <li><a href="#" id="p1">Accueil</a></li>
                        <li><a href="#" id="p2">Défis</a></li>
                        <li><a href="#" id="p3">Qui sommes nous ?</a></li>
                    </ul>
                </nav>
            </header>

            <div id="banniere_image">
                <div id="banniere_description">
                    La nuit de l'info est un évènement ...
                    <a href="#" class="bouton_rouge">Voir l'article <img src="images/flecheblanchedroite.png" alt="" /></a>
                </div>
            </div>

            <section>
                <article id="main_article">

                </article>
                <aside>
                    <p>
                        Ceci est une maquette web pour la nuit de l'info. Si quelqu'un à des talents de webdesigner il est le bienvenu.<br/>
                        Je ne sais pas si les templates sont autorisés parce que <a href="http://freehtml5templates.com/">ce site</a> en fournit de jolis
                        ce qui pourrait nous enlever une épine du pied et nous permettre de nous concentrer sur l'essentiel.

                    </p>

                </aside>
            </section>

            <footer>
                <p>Copyright @Décembre 2012 </p>
                <p>
                    <a href="https://www.facebook.com/universite.paris.ouest"><img src="images/facebook.png" alt="Facebook" /></a>
                    <a href="https://twitter.com/MiageParisOuest"><img src="images/twitter.png" alt="Twitter" /></a>
                    <a href="http://www.u-paris10.fr/">Université Paris 10</a> <a href="https://miage.u-paris10.fr/">MIAGE</a>
                </p>
            </footer>
        </div>
    </body>
</html>
